<template>
	<div ref="chartUser" :style="{height, width}"></div>
</template>
<script lang="ts">
	import {defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted} from 'vue';
	import {useECharts} from '/@/hooks/web/useECharts';
	import {cloneDeep} from 'lodash-es';
	export default defineComponent({
		name: 'bar',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			echartType: {
				type: Number,
				default: 0,
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			width: {
				type: String as PropType<string>,
				default: '100%',
			},
			height: {
				type: String as PropType<string>,
				default: '225px',
			},
			titleValue: {
				type: Object,
				default: () => ({}),
			},
		},
		setup(props) {
			const chartUser = ref<HTMLDivElement | null>(null);
			const {setOptions, resize, echarts} = useECharts(chartUser as Ref<HTMLDivElement>);
			let seriesData = props.chartData;

			const option = reactive({
				backgroundColor: '#0c182d',
				grid: {
					top: '19%',
					bottom: '15%', //也可设置left和right设置距离来控制图表的大小
					left: '10%',
					right: '8%',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						label: {
							show: true,
						},
					},
				},
				legend: {
					data: ['充电量', '充电次数'],
					top: '15%',
					right: '15%',
					textStyle: {
						color: '#ffffff',
					},
				},
				xAxis: {
					data: ['1', '4', '6', '8', '10', '12'],
					axisLine: {
						show: true, //隐藏X轴轴线
						lineStyle: {
							color: '#01FCE3',
						},
					},
					axisTick: {
						show: true, //隐藏X轴刻度
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#7d8590', //X轴文字颜色
						},
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '充电量（度）',
						nameTextStyle: {
							color: '#7d8590',
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: true,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#FFFFFF',
							},
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#7d8590',
							},
						},
					},
					{
						type: 'value',
						name: '充电次数',
						nameTextStyle: {
							color: '#7d8590',
						},
						position: 'right',
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							formatter: '{value}', //右侧Y轴文字显示
							textStyle: {
								color: '#7d8590',
							},
						},
					},
				],
				series: [
					{
						name: '充电量',
						type: 'line',
						yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
						smooth: true, //平滑曲线显示
						showAllSymbol: true, //显示所有图形。
						symbol: 'circle', //标记的图形为实心圆
						symbolSize: 2, //标记的大小
						itemStyle: {
							//折线拐点标志的样式
							color: '#058cff',
						},
						lineStyle: {
							color: '#058cff',
						},
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#0c182d',
								},
								{
									offset: 1,
									color: '#46a4fd',
								},
							]),
						},
						data: [2, 8, 4, 3, 9, 2, 4.3, 1.5],
					},

					{
						// 分隔
						type: 'pictorialBar',
						name: '充电次数',
						itemStyle: {
							normal: {
								color: '#e8c73e',
							},
						},
						symbolRepeat: 'fixed', //是否循环显示图片
						// symbolMargin: 3,//图形间距
						// symbol: 'rect',//图形类型
						symbolClip: true, //是否裁剪图片
						symbolSize: [11, 4], //图形大小
						// symbolPosition: 'start',//图形相对于堆叠图的位置
						// symbolOffset: [0, -1],//图形相对于堆叠图的位置偏移
						data: [20, 80, 100, 40, 34, 90, 60],
						width: '100%',
						z: 0,
						zlevel: 1,
					},
				],
			});

			watchEffect(() => {
				props.chartData && initCharts();
			});

			function initCharts() {
				if (props.option) {
					Object.assign(option, cloneDeep(props.option));
				}
				let seriesData1 = props.chartData.map((item) => {
					return item.power;
				});
				let seriesData2 = props.chartData.map((item) => {
					return item.times;
				});
				let xAxisData = props.chartData.map((item) => {
					return props.echartType == 0 ? item.date.split(' ')[1] : item.date.split(' ')[0];
					// .split(' ')[0]
				});
				// console.log('wwwwwwwwww', seriesData1, seriesData2, xAxisData);
				option.series[0].data = seriesData1;
				// option.series[0].data = seriesData2;
				option.series[1].data = seriesData2;
				option.xAxis.data = xAxisData;
				// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

				// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

				setOptions(option);
			}
			onMounted(() => {
				window.addEventListener('resize', function () {
					resize();
				});
			});
			return {chartUser};
		},
	});
</script>
